<template>
    <div style="background-color: #FEF9EF;">
        <van-config-provider :theme-vars="themeVars">
            <van-nav-bar style="background-color: rgba(0, 0, 0, 0);" left-text="返回" left-arrow
                @click-left="onClickLeft" />
            <div class="body" v-if="xian">
                <!-- 头部 -->
                <div class="head">
                    <img :src="post.userId.avatar" alt="" class="avatar">
                    <div class="user-info">
                        <p class="username">{{ post.userId.username }} <img class="icons" :src="post.tribeId.icons"
                                alt="">
                        </p>
                        <p class="time">{{ post.time }}</p>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="content">
                    <div class="title">{{ post.title }}</div>
                    <p>{{ post.content }}</p>
                    <img class="img" :src="i" alt="" v-for="i in post.img">
                </div>
                <!-- 评论 -->
                <div class="comment">
                    <p class="pl">评论（{{ post.comments.length }}）</p>

                    <div class="comment-item" v-for="i in post.comments">

                        <!-- 评论头部 -->
                        <div class="head">
                            <img :src="i.avatar" alt="" class="avatar">
                            <div class="user-info">
                                <p class="username">{{ i.name }}
                                </p>
                                <p class="time">{{ i.createdAt }}</p>
                            </div>
                        </div>

                        <!-- 评论内容 -->
                        <p style="margin-top: 10px; margin-left: 50px;">{{ i.content }}</p>

                    </div>
                </div>
            </div>

            <!-- 垫子 -->
            <div class="pad"></div>

            <!-- 底部评论区 -->
            <div class="bottom">
                <div :class="isListening ? 'ocring' : 'ocr'" @click="audioCHangeWord()"><van-icon name="volume"
                        size="26" /></div>
                <input type="text" v-model="word">
                <div class="ocr" @click="send()"><van-icon name="guide-o" size="26" /></div>
            </div>

        </van-config-provider>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useDataStore } from '../stores/dataStore';
import { storeToRefs } from 'pinia';

const onClickLeft = () => history.back();
const dataStore = useDataStore();
const { getPostDetail, sendComment } = dataStore;
const { post } = storeToRefs(dataStore); // 使用 storeToRefs 解构状态
const xian = ref(false)
const route = useRoute();
const actId = route.query.id;

onMounted(async () => {
    await getPostDetail(actId);
    console.log(post.value, '这是post!!');
    xian.value = true
});
// 主题色变量
const themeVars = reactive({
    navBarIconColor: '#C94B29',
    navBarTextColor: '#C94B29',
});


const word = ref('');
const isListening = ref(false);

// 语音识别
const audioCHangeWord = () => {
    word.value = '';
    // 创建SpeechRecognition对象
    var recognition = new webkitSpeechRecognition();
    if (!recognition) {
        recognition = new SpeechRecognition();
    }
    // 设置语言
    recognition.lang = 'zh-CN';
    // 开始语音识别
    recognition.start();
    isListening.value = true;
    word.value = '语音识别中...'
    // 监听识别结果
    recognition.onresult = function (event) {
        var result = event.results[0][0].transcript;
        console.log(result, '结果');
        word.value = result;
    };

    // 监听错误事件
    recognition.onerror = function (event) {
        isListening.value = false;
        console.error(event.error, '监听语音失败');
        word.value = ''
    };
    // 监听结束事件（包括识别成功、识别错误和用户停止）
    recognition.onend = function () {
        isListening.value = false
        console.log("语音识别停止");
    };

}

//发送评论
const send = async () => {
    if (word.value.length < 1) {
        showNotify({ type: 'danger', message: '请输入评论内容' });
        return;
    }
    else {
        await sendComment(actId, word.value)
        showNotify({ type: 'success', message: '评论成功' });
        await getPostDetail(actId);
        word.value = ''
    }
}




</script>

<style lang="less" scoped>
.body {
    min-height: 100vh;
    padding: 0 15px;
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
}

.head {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中对齐 */
    margin-top: 10px;
}

.icons {
    width: 20px;
    height: 20px;
    margin-left: 5px;
    vertical-align: middle;
}

.avatar {
    width: 40px;
    /* 设置头像宽度 */
    height: 40px;
    /* 设置头像高度 */
    border-radius: 50%;
    /* 圆形头像 */
    margin-right: 10px;
    /* 头像和文字之间的间距 */
}

.user-info {
    display: flex;
    flex-direction: column;
    /* 竖向排列 */
}

.username {
    font-weight: bold;
    color: #91C5FC;
    /* 加粗用户名 */
}

.time {
    color: gray;
    /* 时间文本颜色 */
    font-size: 0.8em;
    /* 调整时间文本大小 */
}

//一行三个
.img {
    width: 30%;
    height: 100px;
    margin-right: 11px;
    float: left;
    border-radius: 5px;
}

.content {
    margin-top: 15px;
    margin-bottom: 15px;

    .title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    p {
        line-height: 1.5;
        margin-bottom: 10px;
        color: rgb(96, 96, 96);
    }
}

.comment {
    .pl {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
        margin-top: 145px;
    }

    .comment-item {
        background-color: #FFFFFF;
        padding: 10px;
        border-bottom: rgba(227, 224, 224, 0.817) 1px solid;
    }
}

.ocring {
    width: 40px;
    height: 40px;
    color: #e2632d;
    line-height: 48px;
    text-align: center;
    border-radius: 50%;
    background-color: #f4a473;
}

.bottom {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 60px;
    background-color: #fff;
    position: fixed;
    bottom: 0;

    .ocr {
        width: 40px;
        height: 40px;
        color: #7BD40A;
        line-height: 48px;
        text-align: center;
        border-radius: 50%;
        background-color: #E2F3CC;
    }

    input {
        width: 60%;
        height: 40px;
        border: none;
        border-radius: 20px;
        outline: none;
        padding-left: 20px;
        background-color: #FAFAFA;
    }
}

.pad {
    padding: 30px;
}
</style>